<template>
  <div class="find-container">
    <MMNavBar title="发现" :hide-left-arrow="true"></MMNavBar>
    <div class="main-box">
      <!-- 导航栏 -->
      <van-skeleton :loading="isLoading" avatar title :row="100" />
      <!-- 面试技巧区域 -->
      <div class="interview-box">
        <!-- 标题区域 -->
        <div class="title-box">
          <div class="title">
            面试技巧
          </div>
          <div class="arrow-box">
            <span>查看更多</span>
            <i class="iconfont iconicon_more"></i>
          </div>
        </div>
        <!-- 列表区域 -->
        <div class="interview-list">
          <technicItem
            v-for="item in technicList"
            :key="item.id"
            :itemData="item"
          ></technicItem>
        </div>
      </div>
      <!-- 面经分享 -->
      <div class="share-box">
        <!-- 标题区域 -->
        <div class="title-box">
          <div class="title">
            面经分享
          </div>
          <div class="arrow-box">
            <span>查看更多</span>
            <i class="iconfont iconicon_more"></i>
          </div>
        </div>
        <!-- 列表 -->
        <div class="share-list">
          <shareItem
            v-for="item in shareList"
            :key="item.id"
            :itemData="item"
          ></shareItem>
        </div>
      </div>
      <van-divider>到底啦</van-divider>
    </div>
  </div>
</template>

<script>
import MMNavBar from '../../components/MMNavBar'
import technicItem from './technicItem'
import shareItem from './shareItem'
import { getTechnicList, getShareList } from '@/api/find'
export default {
  name: 'find',
  components: {
    MMNavBar,
    technicItem,
    shareItem
  },
  data () {
    return {
      technicList: [],
      shareList: [],
      isLoading: true
    }
  },
  created () {
    this.$toast.loading()
    getTechnicList({ limit: 3 }).then(res => {
      console.log(res)
      this.technicList = res.data.data.list
      this.isLoading = false
    })
    getShareList({ limit: 3 }).then(res => {
      console.log(res)
      this.shareList = res.data.data.list
      this.isLoading = false
    })
  }
}
</script>

<style lang="less">
.van-nav-bar__title {
  font-size: 18px;
}
.find-container {
  .main-box {
    background: @bg-color;
  }
  .interview-box {
    background: @white-color;
    padding: 0 15px;
    margin-bottom: 10px;
  }
  .title-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 69px;
    .title {
      font-size: 18px;
      font-weight: 500;
      color: @main-font-color;
    }
    .arrow-box {
      span {
        font-size: 400;
        font-size: 14px;
        color: @minor-font-color;
      }
    }
  }

  .share-box {
    padding: 0 15px;
    background: @white-color;
  }
}
</style>
